import {useState,useEffect} from 'react'
import jdManagement from '../JdManagement.module.less'

import {
        addRequireDescription,
        deleteRequireDescriptionItem,
    } from '../../../api/index.js'


export default function RequireManage({
    tags,
    requireDescription,
    refreshRequireDescription,
    updateRequireDescription
}){

    useEffect(()=>{
        let hasUpdate = false
        requireDescription.map(item=>{
            let isUpdateflag = false
            let finalTags = item.tags.map(tagItem=>{
                if(!tags.find(item=>item.id === tagItem)){
                    isUpdateflag = true
                    hasUpdate = true
                    return ''
                }else{
                    return tagItem
                }
            }).filter(itemT=>itemT !== '')
            if(isUpdateflag){
                // 直接在这里调用更新 
                updateRequireDescription({...item,tags:finalTags})
            }
            return {...item,tags:finalTags}
        })
        if(hasUpdate){
            // 查询数据 ===
            refreshRequireDescription()
        }
    },[tags])

    

    const highLight = {
            border:'solid rgb(240, 220, 220) 2px',
            color: 'white',
            backgroundColor: '#f87063',
        }

    
    const [selectedId,setSelectedId] = useState([])

    const [currentRequire,setCurrentRequire] = useState('')

    const checkOrUncheck=(id)=>{
        console.log('id',id)
        let result = selectedId.find(item=>{return item ===id})
        if(result){
            let list = selectedId.filter(item=>item !== id)
            setSelectedId([...list])
        }else{
            setSelectedId([...selectedId,id])
        }
    }




    const handleAddRequre = async (selectedId,value)=>{
        if(value){
            await addRequireDescription({
                // id:requireDescription[requireDescription.length - 1]?.id + 1 || 1 ,
                id:requireDescription[0]?.id + 1 || 1 ,
                content:value,
                tags:selectedId
            })
            refreshRequireDescription()
            
            // 清空信息
            setSelectedId([])
            setCurrentRequire('')
        }else{
            alert('请输入信息')
        }
    }


    const handleDeleteRequireDescriptionItem= async (id)=>{
        await deleteRequireDescriptionItem(id)
        refreshRequireDescription()
    }

    return (
        <div className={jdManagement.requireManage}>
            <div>需求管理</div>

            <ul className={jdManagement.requireTag}>
                {
                    tags.map(item=>{
                        return <li 
                            key={item.id}
                            style={ selectedId.includes(item.id) ? highLight : {}} 
                            onClick={()=>checkOrUncheck(item.id)} 
                        >{item.name}</li>
                    })
                }
            </ul>

            <div className={jdManagement.addRequireBox}>
                <textarea placeholder='请输入内容，可以勾选已添加的标签对输入内容进行描述' value={currentRequire} onChange={(event)=>setCurrentRequire(event.target.value)}/>
            </div>

            <div className={jdManagement.addBtn} onClick={()=>handleAddRequre(selectedId,currentRequire)}>添加</div>

            <ul className={jdManagement.requireDescription}>
                {
                    requireDescription?.map((item,index)=>{
                        return( <li key={item.id} >
                            <div>
                                {index+1}.{item.content} 
                                {
                                    item.tags.map(tag=>{
                                        return <span key={tag}>
                                            {
                                                tags.find(tagItem=>{
                                                    return tagItem.id === tag
                                                })?.name
                                            }
                                            
                                        </span>
                                    })
                                }
                            </div>
                            <div onClick={()=>handleDeleteRequireDescriptionItem(item.id)} className={jdManagement.deleteBtn}>X</div>
                        </li>) 
                    })
                }
            </ul>

            <div></div>
            <div></div>
        </div>
    )
}